<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import common from "@/studyRoom/common"
import request from "@/utils/request"

export default {
  name: "index",
  methods: {
    getShowNginxPicUrl,
    //浮窗点击
    handleClick() {
      //获取活动详情
      request({
        url: "studyActivity/getActivityDetails",
        data: {
          studyActivityId: this.studyActivityId,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        //跳转
        common.viewActivityDetail(data)
      })
    },
		handleTouchStart(e) {
			this.startX = e.touches[0].clientX
			this.startY = e.touches[0].clientY
			this.dragging = true
		},
		handleTouchMove(e) {
			if (!this.dragging) return
			const dx = e.touches[0].clientX - this.startX
			const dy = e.touches[0].clientY - this.startY
			this.x += dx
			this.y += dy
			this.startX = e.touches[0].clientX
			this.startY = e.touches[0].clientY
		},
		handleTouchEnd() {
			this.dragging = false
		},
  },
  data() {
    return {
      x: 0,
      y: 0,
      startX: 0,
      startY: 0,
      dragging: false,
    }
  },
  props: {
    studyActivityId: String,
  },
}
</script>

<template>
  <view
    class="component"
    :style="{ transform: `translate(${x}px, ${y}px)` }"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd"
  >
    <image class="icon" :src="getShowNginxPicUrl('HZWZjEA0Nm82zD5wj9F4.png')" @click="handleClick"></image>
  </view>
</template>

<style scoped lang="scss">
.component {
  position: fixed;
  top: 70vh;
  right: 10rpx;
  width: 100rpx;
  height: 100rpx;
  .icon {
    width: 100%;
    height: 100%;
  }
}
</style>
